<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			.nav{
				width: 80%;
				margin: 0 auto;
			}
			/* 初始样式 */
			/* 隐藏按钮 */
			.btn{
				display: none;
			}
			
			/* 子菜单样式 */
			.sub-nav{
				/* 弹性盒子 */
				display: flex;
			}
			.sub-nav > div{
				/* 自动放大缩小 */
				flex: 1;  /* 初始宽度为0 */
				text-align: center;
				border: 1px red solid;
			}
			
			/* 文字换行 */
			.sub-nav span{
				display: block;
				margin: 20px auto;
			}
			.sub-nav img{
				margin-top: 20px;
			}
			
			/* 用弹性盒子让子元素居中 */
			/* .sub-nav > div{
				display: flex;
				竖排排列
				flex-direction: column;
				左右居中 -- 侧轴居中
				align-items: center;
				height: 120px;
			}
			.sub-nav > div > *{
				flex: 1;
				line-height: 60px;
			} */
			
			
			
			/* 小于800px时 */
			@media screen and (max-width:799px) {
				/* 给.sub-nav加自动换行 */
				.sub-nav{
					/* 自动换行 */
					flex-wrap: wrap;
				}
				/* 给.sub-nav设置宽度50% */
				.sub-nav > div{
					/* 初始宽度 */
					flex-basis: 40%;
					/* 内容左对齐---取消前面设置的内容居中 */
					text-align: left;
					
				}
				.sub-nav img{
					margin-left: 10%;
				}
				/* 文字不换行 */
				.sub-nav span{
					display: inline-block;
					margin-left: 20%;
				}
			}
			
			/* 小于520px时 */
			@media screen and (max-width: 519px) {
				/* 显示按钮 */
				.btn{
					display: block;
				}
				.sub-nav{
					display: none;
				}
				
				/* 点击时显示菜单 */
				.nav:hover .sub-nav{
					display: block;
				}
				
				
				/* .sub-nav{
					flex-direction: column;
				} */
				/* 给.sub-nav设置宽度50% */
				.sub-nav > div{
					/* 初始宽度 */
					flex-basis: 90%;
					
				}
				.sub-nav > div > *{
					margin-top: 0;
					margin-bottom: 0;
				}
				
				
			}
			
			
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="btn"><img src="./img/1.png" alt=""></div>
			<div class="sub-nav">
				<div>
					<img src="./img/2.png" alt="">				
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
				<div>
					<img src="./img/2.png" alt="">
					<span>首页</span>
				</div>
			</div>
		</div>
	</body>
</html>